<script lang="ts" setup>
import { ref } from 'vue'
import { ChevronsUpDownIcon, PlusIcon, AlertCircleIcon, MinusCircleIcon } from 'lucide-vue-next'
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@/components/ui/collapsible'
import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
import { Button } from '@/components/ui/button'
import { Slider } from '@/components/ui/slider'
import { knowledgedict } from '@/lib/dict'
import storeMap from '@/pina'
import KnowLedgeList from "@/components/vue-flow/knowledge-list.vue"
type KnowledgeItem = {
  knowledgeId: string
}

const isOpen = ref(true);
const showList = storeMap.useKnowLedgeDialogStore();
const kbaseName = storeMap.useKnowLedgeStore().template.data.kbase;
const {data} = defineProps([
  'data' as any,
])
function handleOnClickAddBtnInInput(e: Event) {
  e.stopPropagation()
  storeMap.useKnowLedgeDialogStore().open()
  isOpen.value = true;
}

function handleClickDeleteBtnInInput(index: number) {
  data.value.relatedKnowledgeArray.splice(index, 1)
}
</script>

<template>
  <div class="rounded-md bg-muted px-3 py-4">
    
    <Collapsible v-model:open="isOpen">
      <collapsible-trigger as-child>
        <div class="flex w-full items-center justify-between">
          <div class="flex items-center gap-x-2">
            <chevrons-up-down-icon class="h-4 w-4 cursor-pointer" />
            <p>知识库</p>
            <tooltip-provider>
              <tooltip>
                <tooltip-trigger>
                  <alert-circle-icon class="h-3 w-3 text-muted-foreground" />
                </tooltip-trigger>
                <tooltip-content>
                  <p class="max-w-60">
                    选择需要匹配的知识范围，并仅从所选知识中检索信息。
                  </p>
                </tooltip-content>
              </tooltip>
            </tooltip-provider>
          </div>
          <Button variant="ghost">
            <plus-icon class="h-4 w-4 cursor-pointer text-primary" @click="handleOnClickAddBtnInInput" />
          </Button>
        </div>
      </collapsible-trigger>
      <collapsible-content class="space-y-3 px-3 py-3">
        <p class="text-blod">
          {{kbaseName.title}}
        </p>
        <div class="flex gap-x-8">
          <div class="flex w-52 items-center gap-x-1">
            <p class="text-nowrap text-sm text-muted-foreground">搜索策略</p>
            <tooltip-provider>
              <tooltip>
                <tooltip-trigger>
                  <alert-circle-icon class="h-3 w-3 text-muted-foreground" />
                </tooltip-trigger>
                <tooltip-content>
                  <p class="max-w-60">
                    从知识库中获取知识的检索方式，不同的检索策略可以更有效地找到正确的信息，提高其生成的答案的准确性和可用性
                  </p>
                </tooltip-content>
              </tooltip>
            </tooltip-provider>
          </div>
          <Select v-model="data.kbase.strategy">
            <SelectTrigger class="w-full" as="div">
              <SelectValue placeholder="请选择" />
            </SelectTrigger>
            <SelectContent>
                 <SelectItem v-for="option in knowledgedict" :key="option.value" :value="option.value">
                  {{ option.label }}
                </SelectItem>
            </SelectContent>
          </Select>
        </div>
        <div class="flex gap-x-8">
          <div class="flex w-52 items-center gap-x-1">
            <p class="text-nowrap text-sm text-muted-foreground">最大召回次数</p>
            <tooltip-provider>
              <tooltip>
                <tooltip-trigger>
                  <alert-circle-icon class="h-3 w-3 text-muted-foreground" />
                </tooltip-trigger>
                <tooltip-content>
                  <p class="max-w-60">
                    返回给模型的知识段落的最大数量。数字越大，返回的内容就越多。
                  </p>
                </tooltip-content>
              </tooltip>
            </tooltip-provider>
          </div>
          <Slider v-model="data.kbase.topK" :max="10" :min="1" :step="1" />
          <p class="w-8">
            {{ data.kbase.topK[0] }}
          </p>
        </div>
        <div class="flex gap-x-8">
          <div class="flex w-52 items-center gap-x-1">
            <p class="text-nowrap text-sm text-muted-foreground">最小匹配度</p>
            <tooltip-provider>
              <tooltip>
                <tooltip-trigger>
                  <alert-circle-icon class="h-3 w-3 text-muted-foreground" />
                </tooltip-trigger>
                <tooltip-content>
                  <p class="max-w-60">
                    根据设置的匹配度选择段落并将其返回给模型。匹配度低于设定值的内容将不会被召回。
                  </p>
                </tooltip-content>
              </tooltip>
            </tooltip-provider>
          </div>
          <Slider v-model="data.kbase.similarityThreshold" :max="1" :min="0" :step="0.1" />
          <p class="w-8">
            {{ data.kbase.similarityThreshold[0] }}
          </p>
        </div>
      </collapsible-content>
    </Collapsible>
    
  </div>
</template>
